<template>
  <div class="dx_teb">
    <div class="tab_log">
      <span><i class="iconfont icon-touxiang"></i>云化安全边缘网关</span>
    </div>

    <ul class="fr">
      <li><a href="#">首页</a></li>
      <li class="pagetool">
        <a href="#" @click="showCont">配置管理</a
        ><i class="iconfont icon-xiajiantou"></i>
        <ul class="sd" v-if="show">
          <li><a href="">组织管理</a></li>
          <hr />
          <li><a href="">用户管理</a></li>
          <hr />
          <li><a href="">策略管理</a></li>
          <hr />
          <li><a href="">日志管理</a></li>
        </ul>
      </li>
      <li><a href="#">节点管理</a></li>
      <li><a href="#">能力管理</a></li>
      <li><a href="#">终端管理</a></li>
      <li><a href="#">应用管理</a>|</li>
      <li><a href="#" class="iconfont icon-gouwu_o">我的订单</a>|</li>
      <li class="pagetools">
        <ul class="sds" v-if="shows">
          <li><a href="">设置</a></li>
          <hr />
          <li><a href="">最小化</a></li>
          <hr />
          <li class="as"><a href="">退出</a></li>
          <hr />
        </ul>
        <a href="#" class="iconfont icon-notification-filled"
          ><span class="iconfont icon-touxiang">安全建设-geshuai</span></a
        ><span class="rights" @click="showConts"
          ><i class="iconfont icon-xiajiantou"></i
        ></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      shows: false,
    };
  },
  methods: {
    showCont: function () {
      this.show = !this.show;
    },
    showConts: function () {
      this.shows = !this.shows;
    },
  },
};
</script>

<style scoped>
@import "./css/base.css";
@import "./css/index.css";
@import "./icons/iconfont.css";
</style>